import React, { useContext, useEffect, useState } from "react";
import { View, Text, StyleSheet, TouchableOpacity, Alert } from "react-native";

import AsyncStorage from "@react-native-async-storage/async-storage";
import * as DocumentPicker from "expo-document-picker";
import * as FileSystem from "expo-file-system";
import * as IntentLauncher from "expo-intent-launcher";
import { AntDesign } from "@expo/vector-icons";
import { fileWeb } from "../../api/query";
import { useSelector } from "react-redux";
import query from "../../api/query";
import ResearchContext from "../../context/preparation/ResearchContext";
import LoadingBar from "../../components/InterView/LoadingBar";

const ResearchUpload = () => {
  const { addResearch, isResearchLoading } = useContext(ResearchContext);
  const [localFile, setLocalFile] = useState("");
  const [isSelect, setIsSelect] = useState(false);

  const pickDocument = async () => {
    let result = await DocumentPicker.getDocumentAsync({});
    if (result.type === "cancel") {
      setIsSelect(false);
    } else {
      setLocalFile(result);
      setIsSelect(true);
    }
  };

  const onPreview = async () => {
    FileSystem.getContentUriAsync(localFile.uri).then((cUri) => {
      IntentLauncher.startActivityAsync("android.intent.action.VIEW", {
        data: cUri.uri,
        flags: 1,
        type: localFile.mimeType,
      });
    });
  };

  const onConfirm = () => {
    Alert.alert("提示", "确定要提交吗?", [
      {
        text: "取消",
        style: "cancel",
      },
      {
        text: "确定",
        onPress: async () => {
          addResearch(localFile, () => setIsSelect(false));
        },
      },
    ]);
  };

  return (
    <View style={styles.container}>
      <LoadingBar visible={isResearchLoading} />
      {isSelect && (
        <View
          // onPress={onPreview}
          style={{ justifyContent: "center", alignItems: "center" }}
        >
          {localFile.uri.split(".").pop() === "pdf" ? (
            <AntDesign name="pdffile1" size={60} color="#ccc" />
          ) : (
            <AntDesign name="wordfile1" size={60} color="#ccc" />
          )}

          <Text style={{ fontSize: 16, margin: 5 }}>{localFile.name}</Text>
        </View>
      )}

      {!isSelect && (
        <TouchableOpacity style={styles.Button} onPress={() => pickDocument()}>
          <Text style={styles.Text}>选择文件</Text>
        </TouchableOpacity>
      )}

      {isSelect && (
        <View style={styles.btnBox}>
          <TouchableOpacity
            style={styles.backBtn}
            onPress={() => setIsSelect(false)}
          >
            <Text style={{ color: "#41C3EE", fontSize: 16 }}>取消</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.submitBtn}
            onPress={() => onConfirm()}
          >
            <Text style={{ color: "#fff", fontSize: 16 }}>提交</Text>
          </TouchableOpacity>
        </View>
      )}
    </View>
  );
};

var styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    flex: 1,
    justifyContent: "center",
    padding: 16,
  },
  hint: {
    textAlign: "center",
  },
  Button: {
    borderRadius: 5,
    margin: 18,
    padding: 10,
    backgroundColor: "#3ABEF0",
    alignItems: "center",
    justifyContent: "center",
    elevation: 2, //设置阴影角度，通过这个设置有无阴影
    shadowColor: "gray", // 设置阴影色
  },
  Text: {
    fontSize: 16,
    color: "#fff",
    fontWeight: "bold",
  },
  btnBox: {
    flexDirection: "row",
    justifyContent: "space-between",
    margin: 18,
    paddingTop: 5,
  },
  backBtn: {
    borderWidth: 1,
    borderColor: "#41C3EE",
    alignItems: "center",
    padding: 10,
    borderRadius: 5,
    flex: 1,
    marginRight: 20,
  },
  submitBtn: {
    backgroundColor: "#41C3EE",
    alignItems: "center",
    padding: 10,
    borderRadius: 5,
    flex: 2,
    // width: 200,
  },
});

export default ResearchUpload;
